<template>
  <canvas id="circle" width="200" height="200"></canvas>  
</template>
<script>
export default {
  data() {
    return {};
  },
  mounted() {
    this.drawCircle();
  },
  methods: {
    drawCircle() {
      var canvas = document.getElementById("circle");
      var percent = 60;
      var process = 60;
      console.log(11111);
      if (canvas.getContext) {
        var ctx = canvas.getContext("2d"); //2d用单引用括起来
        ctx.beginPath();
        ctx.arc(100, 100, 80, 0, Math.PI * 2);
        ctx.closePath();
        ctx.fillStyle = "#999999";
        ctx.fill();
        ctx.beginPath();
        ctx.moveTo(100, 100);
        ctx.arc(
          100,
          100,
          80,
          Math.PI * 1.5,
          Math.PI * (1.5 + (2 * percent) / 100)
        );
        ctx.closePath();
        ctx.fillStyle = "#FF9600";
        ctx.fill();

        // 画内填充圆
        ctx.beginPath();
        ctx.arc(100, 100, 75, 0, Math.PI * 2);
        ctx.closePath();
        ctx.fillStyle = "#fff";
        ctx.fill();
        // 填充文字
        ctx.font = "bold 12pt Microsoft YaHei";
        ctx.fillStyle = "#333";
        ctx.textAlign = "center";
        ctx.textBaseline = "middle";
        ctx.moveTo(100, 100);
        ctx.fillText("cpu消耗:" + process + "%", 100, 100);
      }
    }
  }
};
</script>



<style>
</style>
